import React, { Component } from 'react'
import styled from 'styled-components'
import { Row, Col, Icon } from 'antd'
import Imgviewer from '@/components/ImgViewer'
import { connect } from 'dva'

const Title = styled.div`
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  color: rgba(51,51,51,1);
  background: #fff;
  padding-left: 30px;
`

const Footer = styled.div`
  height: 70px;
  background: #fff;
  font-size: 16px;
  color:rgba(237,113,9,1);
  line-height:30px;
  display: flex;
  align-items: center;
  padding-left: 30px;
`

//单位自查
const UnitSelf = styled.div`
  width: 100%;
  height: 40px;
  background: rgba(214,236,253,1);
  border: 1px solid rgba(174,199,217,1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 30px;
  font-size: 16px;
  color:rgba(0,0,0,1);
`

//第三方复查
const UnitRep = styled(Row)`
  height: 90px;
  background: rgba(214,236,253,1);
  border: 1px solid rgba(174,199,217,1);
  padding: 0  20px  0  30px;
  display: flex;
  align-items: center;
  font-size: 16px;
  color:rgba(0,0,0,1);
`


const HeaderTable = styled(Row)`
  width: 100%;
  height: 40px;
  background: rgba(240,246,250,1);
  padding-left: 30px;
  line-height: 40px;
`
const ItemContainer = styled(Row)`
  background: #fff;
  padding: 20px 0 20px 30px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #DEE1E7
`


interface Item {
  data: {
    name: string,
    images: Array<string>,
    cause: string,
    state: 1 | 2,
  }
}

// 内容
const Item: React.FC<Item> = ({ data }) => (
  <ItemContainer>
    <Col span={6}>
      <div style={{ width: '80%', lineHeight: '30px' }}>
        {data?.name}
      </div>
    </Col>
    <Col span={4}>
      {data?.state === 1 ? '正常' : '异常'}
    </Col>
    <Col span={5}>
      <div style={{ width: '80%' }}>
        <p>{data.cause}</p>
      </div>
    </Col>
    <Col span={9}>
      <div style={{ width: '80%', display: 'flex', justifyContent: 'space-between' }}>
        {
          Array.isArray(data?.images) && data.images.map((item, ind) => (
            <Imgviewer key={item} thumbWidth='100px' thumbHeight='76px' isThumb url={item} />
          ))
        }
      </div>
    </Col>
  </ItemContainer>
)


interface Details {
  question: Array<{
    name: string,
    images: Array<string>,
    cause: string,
    state: 1 | 2
  }>,
  createTime: string,
  userName: string,
  userMobile: string,
  levelName: string,
  remark: string,
}

interface IProps {
  dispatch?: Function,
  reportDetails?: {
    owner: Details,
    other: Details
  }
}


const CommonItem = () => (
  <HeaderTable>
    <Col span={6}>
      检查项
  </Col>
    <Col span={4}>
      检查结果
  </Col>
    <Col span={5}>
      异常原因
  </Col>
    <Col span={9}>
      上传图片
  </Col>
  </HeaderTable>
)

@connect(({ unit_report }) => ({
  reportDetails: unit_report.reportDetails || {}
}))
class CheckDetails extends Component<IProps> {


  componentDidMount() {
    const { dispatch } = this.props
    dispatch({ type: 'unit_report/queryReportItems' })
  }

  render() {
    const { reportDetails } = this.props
    const { owner, other } = reportDetails
    const ownerQuestions = owner?.question || []
    const otherQuestions = other?.question || []
    const ownerLength = Array.isArray(owner?.question) && owner?.question.filter(item => item.state === 2).length || 0
    const otherLength = Array.isArray(other?.question) && other?.question.filter(item => item.state === 2).length || 0
    return (
      <>

        {
          owner && <>
            <Title>
              消防检查情况
        </Title>
            <UnitSelf>
              <div>单位自查</div>
              <div>检查时间：{owner?.createTime}</div>
              <div>检查人：{owner?.userName}</div>
              <div>检查人电话： {owner?.userMobile}</div>
              <div>检查结果：{owner?.levelName}</div>
              <div>{ownerLength}项异常项</div>
            </UnitSelf>
            <CommonItem />
            {
              Array.isArray(ownerQuestions) && ownerQuestions.map((item: any, ind) => (
                <Item key={ind} data={item} />
              ))
            }
          </>
        }


        {
          other && <>
            <UnitRep>
              <Col span={3}>
                第三方复查
          </Col>
              <Col span={21} style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-around', height: '100%' }}>
                <section style={{ display: 'flex', justifyContent: 'space-between' }}>
                  <div>检查时间：{other?.createTime}</div>
                  <div>检查人：{other?.userName}</div>
                  <div>检查人电话： {other?.userMobile}</div>
                  <div>检查结果：{other?.levelName}</div>
                  <div>{otherLength}项异常项</div>
                </section>
                <div>整改建议：{other?.remark}</div>
              </Col>
            </UnitRep>

            <CommonItem />
            {
              Array.isArray(otherQuestions) && otherQuestions.map((item: any, ind) => (
                <Item key={ind} data={item} />
              ))
            }
          </>
        }


        <Footer>
          <Icon type="message" style={{ marginRight: 10 }} />
          {new Date().getMonth() === 0 ? 1 : new Date().getMonth()}月进行了{owner ? 1 : 0}次单位自查、{other ? 1 : 0}次第三方复查。
          {
            owner && (
              <>
                单位自查的检查结果是{owner?.levelName}，
                共{ownerLength}项异常项，整改建议:{owner?.remark}
              </>
            )
          }
          {
            other && (
              <>
                第三方复查的检查结果是{other?.levelName}，
                共{otherLength}项异常项，
                整改建议:{other?.remark}。
             </>
            )
          }
        </Footer>
      </>
    )
  }
}

export default CheckDetails


